<!--
  * 登录
  *
  * @Author:    dcsoft
  * @Date:      2022-09-12 22:34:00
  * @Wechat:    dctech
  * @Email:     dctech@dctech2020.com
  *@Copyright 山东东晨软件科技有限公司(https://www.dctech2020.com),since 2015
  *
-->
<template>
  <div class="login-container">
    <div class="box-item desc">
      <div class="welcome">
        <p>DC6300 能碳环综合管控平台</p>
        <div class="desc">
          <!-- DCIOT_VUE 是由 山东
          <a
            target="_blank"
            href="https://www.dctech2020.com"
            style="
              color: white;
              weight: bolder;
              font-size: 15px;
              text-decoration: underline;
            "
            >东晨软件科技有限公司</a> -->
          <div>
            <span style="font-size: 16px; font-weight: 900">核心理念：</span
            >以节能降本为核心，以减碳增值为路径，以环境监测实现管理闭环
          </div>
          <br />
          <br />
          <span style="font-size: 16px; font-weight: 900">节能将本：</span
          >以节能降本为核心通过优化能源使用效率、减少能源浪费等手段，帮助企业和园区
          实现降低运营成本的目标<br />
          <!-- <br /> -->
          <span style="font-size: 16px; font-weight: 900">减碳增值：</span
          >以减碳增值为路径，强调在减少碳排放的同时，通过碳资产管理和碳交易等手
          段，为企业创造更多的经济价值<br />
          <!-- <br /> -->
          <span style="font-size: 16px; font-weight: 900">环境监测：</span
          >以环境循环监测实现管理闭环，通过实时监测和分析环境数据，确保环境指标的达
          标和可持续发展目标的实现，从而形成节能、减碳和环境保护的全方位闭环管理体系
          <br />
          <br />
          <!-- <span class="setence">
            致伟大的开发者 ：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;我们希望用一套漂亮优雅的代码和一套整洁高效的代码规范，让大家在这浮躁的世界里感受到一股把代码写好的清流
            !
            <br />
            保持谦逊，保持学习，热爱代码，更热爱生活 !<br />
            永远年轻，永远前行 !<br />
          </span> -->
          <div class="setence">copyright@ 山东东晨软件科技有限公司 2024 ～ 2033</div>
        </div>
      </div>
    </div>
    <div class="box-item login">
      <!-- <img class="login-qr" :src="loginQR" /> -->
      <div class="login-title">账号登录</div>
      <a-form ref="formRef" class="login-form" :model="loginForm" :rules="rules">
        <a-form-item name="loginName">
          <a-input v-model:value.trim="loginForm.loginName" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item name="password">
          <a-input-password
            v-model:value="loginForm.password"
            autocomplete="on"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码：至少三种字符，最小 8 位"
          />
        </a-form-item>
        <a-form-item name="captchaCode">
          <a-input
            class="captcha-input"
            v-model:value.trim="loginForm.captchaCode"
            placeholder="请输入验证码"
          />
          <img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
          <!-- <span> ( 账号：admin, 密码：123456)</span> -->
        </a-form-item>
        <a-form-item>
          <div class="btn" @click="onLogin">登录</div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import { message } from "ant-design-vue";
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { loginApi } from "/@/api/system/login-api";
import { SmartLoading } from "/@/components/framework/smart-loading";
import { LOGIN_DEVICE_ENUM } from "/@/constants/system/login-device-const";
import { useUserStore } from "/@/store/modules/system/user";

import LocalStorageKeyConst from "/@/constants/local-storage-key-const.js";
import { encryptData } from "/@/lib/encrypt";
import { smartSentry } from "/@/lib/smart-sentry";
import { buildRoutes } from "/@/router/index";
import { localSave } from "/@/utils/local-util.js";

//--------------------- 登录表单 ---------------------------------

const loginForm = reactive({
  loginName: "",
  password: "",
  captchaCode: "",
  captchaUuid: "",
  loginDevice: LOGIN_DEVICE_ENUM.PC.value,
});
const rules = {
  loginName: [{ required: true, message: "用户名不能为空" }],
  password: [{ required: true, message: "密码不能为空" }],
  captchaCode: [{ required: true, message: "验证码不能为空" }],
};

const showPassword = ref(false);
const router = useRouter();
const formRef = ref();
const rememberPwd = ref(false);

onMounted(() => {
  document.onkeyup = (e) => {
    if (e.keyCode == 13) {
      onLogin();
    }
  };
  // notification["success"]({
  //   message: "温馨提示",
  //   description: "DCIOT-VUE 提供 9种 登录背景风格哦！",
  //   duration: 8,
  //   onClick: () => {},
  //   btn: () =>
  //     h(
  //       Button,
  //       {
  //         type: "primary",
  //         target: "_blank",
  //         size: "small",
  //         href: "https://smartadmin.vip/views/v3/front/Login.html",
  //         onClick: () => {},
  //       },
  //       { default: () => "去看看" }
  //     ),
  // });
});
onUnmounted(() => {
  document.onkeyup = null;
});

//登录
async function onLogin() {
  formRef.value.validate().then(async () => {
    try {
      SmartLoading.show();
      // 密码加密
      let encryptPasswordForm = Object.assign({}, loginForm, {
        password: encryptData(loginForm.password),
      });
      const res = await loginApi.login(encryptPasswordForm);
      stopRefrestCaptchaInterval();
      localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : "");
      message.success("登录成功");
      //更新用户信息到pinia
      useUserStore().setUserLoginInfo(res.data);
      console.log(res.data);
      //构建系统的路由
      buildRoutes();
      router.push("/home");
    } catch (e) {
      if (e.data && e.data.code !== 0) {
        loginForm.captchaCode = "";
        getCaptcha();
      }
      smartSentry.captureError(e);
    } finally {
      SmartLoading.hide();
    }
  });
}

//--------------------- 验证码 ---------------------------------

const captchaBase64Image = ref("");
async function getCaptcha() {
  try {
    let captchaResult = await loginApi.getCaptcha();
    captchaBase64Image.value = captchaResult.data.captchaBase64Image;
    loginForm.captchaUuid = captchaResult.data.captchaUuid;
    beginRefrestCaptchaInterval(captchaResult.data.expireSeconds);
  } catch (e) {
    console.log(e);
  }
}

let refrestCaptchaInterval = null;
function beginRefrestCaptchaInterval(expireSeconds) {
  if (refrestCaptchaInterval === null) {
    refrestCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
  }
}

function stopRefrestCaptchaInterval() {
  if (refrestCaptchaInterval != null) {
    clearInterval(refrestCaptchaInterval);
    refrestCaptchaInterval = null;
  }
}

onMounted(getCaptcha);
</script>
<style lang="less" scoped>
@import "./login.less";
</style>
